<template>
    <div class="context">
        <div class="top">
            <div class="logo">
                消防综合管理平台
            </div>
            <div class="status">
                <StatusList :stateList="stateDataList"></StatusList>
            </div>
            <div class="now-time">
                <TimeClock></TimeClock>
            </div>
        </div>
        <div class="middle"
            id="map">
            
        </div>

        <div class="footer">
            <MapButton v-for="item in mapButtonList"
                :key="item.key"
                :item="item"
                :btnChange="btnClickHandle">
            </MapButton>
        </div>
        <!-- 预警top标签 -->
        <RiskList :hiddenDangerList="hiddenDangerList"
            :highRiskAreaList="highRiskAreaList"
            :riskCompanyList="riskCompanyList"
            :itemShow="riskShow"></RiskList>
        <PointTile @close="closePointDetail"
            :itemInfo="pointInfo"
            :show="pointDetailShow"></PointTile>
    </div>

</template>
<script>
import { mapGetters } from 'vuex';

import TimeClock from '../components/TimeClock';
import StatusList from '../components/StatusList';
import MapButton from '../components/MapButton';
import RiskList from '../components/RiskList';
import PointTile from '../components/PointTitle';
import map from '../assets/js/map';
import settings from '../config/settings';

export default {
    name: 'MiddleView',
    components: { TimeClock, StatusList, MapButton, RiskList, PointTile },
    mounted: function() {
        this.$nextTick(function() {
            // 修复地图大小
            // fixMapContainer();
            map.initMap(this, 'map', this.clickHandle);
        });
    },
    methods: {
        //图标点击回调
        clickHandle(data, target, event) {
            console.log('vue点击回调', data);
            this.$store.dispatch('getPointInfo', data);
        },
        //关闭坐标详情页面.
        closePointDetail() {
            this.$store.dispatch('pointDetailShow', false);
        },
        // 底部按钮回调.
        btnClickHandle(item) {
            //debugger;
            if (item.key <= 6) {
                map.clearFix();
                // 点位切换.
                let ctype = this.getBigType(item.key);
                map.toggleType(ctype);
            } else {
                map.changeType(null);
                switch (item.key) {
                    case 7:
                        map.showRKMDLayer(item.active);
                        break;
                    case 8:
                        map.showFireMarker(item.active);
                        break;
                    case 9:
                        map.showFXFXLayer(item.active);
                        break;
                    case 10:
                        map.showXCTJLayer(item.active);
                        break;
                    default:
                        break;
                }
            }
        },
        //地图点位移入
        pointMouseOver(cdata, target, event) {
            console.log(event);

            // let xScale = window.WIDTH_SCALE;
            // let yScale = window.HEIGHT_SCALE;
            let x = event.clientX / window.WIDTH_SCALE;
            let y = event.clientY / window.HEIGHT_SCALE;

            this.$store.commit('changeFireInfo', {
                name: cdata.station_name,
                address: cdata.station_address,
                //top: y / settings.BASE_SIZE + 'rem',
                //left: x / settings.BASE_SIZE + 'rem',
                top: y + 'px',
                left: x + 'px',
                show: true
            });
        },
        //地图点位移出
        pointMouseOut() {
            this.$store.commit('changeFireInfo', {
                show: false
            });
        },
        getBigType(key) {
            let type = 9;
            switch (key) {
                case 1:
                    type = 0; // 全部
                    break;
                case 2:
                    type = 3; //智慧用水
                    break;
                case 3:
                    type = 2; //智慧用电
                    break;
                case 4: //独立烟感
                    type = 1;
                    break;
                case 5: // 可燃气体
                    type = 4;
                    break;
                case 6: // 远程监控
                    type = 5;
                    break;
                default:
                    break;
            }
            return type;
        }
    },
    computed: {
        ...mapGetters({
            stateDataList: 'stateDataList',
            mapButtonList: 'mapButtonList',
            hiddenDangerList: 'hiddenDangerList',
            highRiskAreaList: 'highRiskAreaList',
            riskCompanyList: 'riskCompanyList',
            riskShow: 'riskShow',
            fireInfo: 'fireInfo',
            pointDetailShow: 'pointDetailShow',
            pointInfo: 'pointInfo'
        })
    }
};
// 页面拉伸会导致地图图片失真,把地图的div改为原本大小.
// let mapContainer, mapWidth;
// function fixMapContainer() {
//     if (!mapContainer) {
//         mapContainer = $('#map');
//         mapWidth = window.SCREEN_WIDTH / 2 - 2;
//         //mapHeight = window.SCREEN_HEIGHT -  settings.BASE_SIZE;
//         $(window).resize(fixMapContainer);
//     }
//     let w = window.WIDTH_SCALE;
//     let h = window.HEIGHT_SCALE;
//     let nowWidth = mapWidth * w;
//     //let nowHeight = mapHeight * h;
//     let nowWidthScale = 1 / w;
//     let nowHeightScale = 1 / h;
//     mapContainer.css({
//         width: nowWidth,
//         //height: nowHeight,
//         transform: 'scale(' + nowWidthScale + ',' + nowHeightScale + ')'
//     });
// }
</script>
<style scoped>
.context {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.top {
    width: 100%;
    height: 1rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    background: #191a1b;
}
.middle {
    flex-grow: 1;
    transform-origin: 0 0;
    width: 99.5%;
    margin: 0 auto;
}

.footer {
    width: 100%;
    height: 1rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}
.logo {
    font-size: 0.5rem;
    margin-left: 0.2rem;
}
.now-time {
    margin-right: 0.1rem;
}
.status {
    width: 50%;
    height: 100%;
}
</style>